<template>
  <div>
    <div class="progress progress-xs" style="margin-bottom: 0" :class="{'progress-striped':isStriped, active:isActive}">
      <div class="progress-bar" :class="[progressBarColor]" :style="{width: progressRate+'%'}"></div>
    </div>
  </div>
</template>

<script>
  import {STAGE1,STAGE2,STAGE3,STAGE4,FINISH} from "../../assets/js/enum/ProgressColor"

  export default {
    name:"ProgressBar",
    props:{
      total: {
        type:Number|String,
        required:true
      },
      progress: {
        type:Number|String,
        required:true
      }
    },
    computed:{
      progressBarColor() {
        let color = FINISH;
        //根据进度选用不同的颜色
        if(parseInt(this.total) > 0) {
          let rate = Math.round(parseInt(this.progress) * 100 / parseInt(this.total));
          if (rate < 40) color = STAGE1;
          else if (rate < 60) color = STAGE2;
          else if (rate < 80) color = STAGE3;
          else if (rate < 100) color = STAGE4;
        }
        return "progress-bar-"+color;
      },
      progressRate() {
        if(parseInt(this.total) === 0) return 100;
        return Math.round(parseInt(this.progress) * 100 / parseInt(this.total));
      },
      isActive() {
        return this.progress < this.total;
      },
      isStriped() {
        return this.progress < this.total;
      }
    }
  }
</script>



// WEBPACK FOOTER //
// ProgressBar.vue?4582b9fe
